<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./filters/formatDate.js"></script>
    <style>
        .success {
            color: green;
        }

        .error {
            color: red;
        }
    </style>

</head>
<body>
    <div id="app">
        <p>{{ day | formatDate("yyyy-MM-dd") }}</p>
        <ul>
            <li v-for="(item, index) in 10" :key="index" :class=" item%2==0?'error':'success' ">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item, index) in 10" :key="index" :class=" item | getClass ">{{item}}</li>
        </ul>
        <!-- 过滤范围仅限于 插值表达式和 v-bind 指令 -->
        <!-- <p v-text=" 2 | getClass ">aa</p> -->
        <!-- 链式调用： 后续过滤器处理的是前面过滤的结果         -->
        <p>{{ "链式调用" | fun1 | fun2 | fun3 }}</p>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            day: new Date()
        },
        filters:{
            getClass(target){
                return target%2==0?'error':'success';
            },
            fun1(target){
                return target + ":fun1";
            },
            fun2(target){
                console.log(target)
                return target + ":fun2";
            },
            fun3(target){
                return target + ":fun3";
            }

        }
    })
</script>
</html>